<template>
    <view class="gridScroll" v-if="data.length">
        <scroll-view class="gridScroll" scroll-x="true" :scroll-left="scrollLeft" @scroll="gridScroll">
            <view class="gridScroll__main">
                <block v-for="(item, index) in data" :key="index">
                    <view class="gridScroll__cell" @tap="_click(index)">
                        <image class="gridScroll__img" :src="item.imgUrl"></image>
                        <text class="gridScroll__txt">{{ item.title }}</text>
                    </view>
                </block>
            </view>
        </scroll-view>
        <view class="gridScroll__progress">
            <view
                class="gridScroll__progressMain"
                :style="{ 'margin-left': gridScrollLeft + '%' }"
            ></view>
        </view>
    </view>
</template>

<script>
import { toast } from '@/common/util.js';

let winWidth = 375;

export default {
    props: {
        data: {
            type: Object,
            default: function(e) {
                return {};
            }
        }
    },
    data() {
        return {
            scrollLeft: 0,
            gridScrollLeft: 0
        };
    },
    onReady() {
        winWidth = uni.getSystemInfoSync().windowWidth;
    },
    onShow() {
		this.scrollLeft = this.gridScrollLeft;
		this.$nextTick(function() {
			this.scrollLeft = 0;
		});
    },
    methods: {
        _click: function(index) {
            // grid点击
            this.$emit('click', index);
        },
        gridScroll: function(e) {
            // grid滚动条移动
            this.gridScrollLeft = (e.detail.scrollLeft * 70) / (e.detail.scrollWidth - winWidth);
        }
    }
};
</script>

<style lang="scss">
    @import "@/style/mixin/flex.scss";
    
    .gridScroll {
        position: relative;
        width: 100%;
        background-color: $uni-bg-color;
        margin-bottom: 24upx;
    
        &__main {
            @include flex(null, null, column, wrap);
            height: 272upx;
            padding: 32upx 0 48upx;
        }
    
        &__cell {
            @include flex(start, center, column);
            width: 20%;
            padding: 8upx 0;
        }
    
        &__img {
            display: block;
            width: 84upx;
            height: 84upx;
            background-color: #ebfbee;
            border-radius: 50%;
            box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
        }
    
        &__txt {
            color: $uni-text-color;
            font-size: 20upx;
        }
    
        &__progress {
            position: absolute;
            left: 40%;
            right: 40%;
            bottom: 20upx;
            width: 20%;
            height: 10upx;
            overflow: hidden;
            border-radius: 10upx;
            background-color: $uni-bg-color-grey;
    
            &Main {
                height: 100%;
                width: 30%;
                border-radius: 10upx;
                background-color: $uni-color-primary;
            }
        }
    }
</style>